<template>
    <div 
        class="QilinForm"
        :style="ownFormConfig.elFormConfig?.style"
    >
        <el-form
            ref="formRef"
            :key="componentKey"
            :model="ownFormConfig.submitData"
            :rules="ownFormRules"
            :validate-on-rule-change="ownFormConfig.elFormConfig?.validateOnRuleChange || false"
            :label-position="ownFormConfig.elFormConfig?.labelPosition || 'right' "
            :label-width="ownFormConfig.elFormConfig?.labelWidth ?? '60px' "
            :label-suffix="ownFormConfig.elFormConfig?.labelSuffix || ':' "
            :size="ownFormConfig.elFormConfig?.size || 'default' "
            :class="[
                ownFormConfig.elFormConfig?.className,
                ownFormConfig.elFormConfig?.border ? 'table-border' : ''
            ]"
            :style="{'--form-border-color':ownFormConfig.elFormConfig?.borderColor || '#E9E9E9'}"
            v-bind="ownFormConfig.elFormConfig"
            @keydown.enter="(e)=>{
                e.preventDefault();
            }"
        >
            <template 
                v-for="(item,index) in ownFormConfig.itemConfig" 
                :key="item.dataName || 'form-key-'+index ">
                <el-form-item
                    v-if="!item.isHide && item.type !== 'itemSlot' "
                    :prop="item.dataName"
                    :class="[
                        'width'+(item.width ? item.width : 24 ),
                        item.className
                    ]"
                    :style="item.itemStyle"
                    :for="item.itemClick && '-'"
                    @click="item.itemClick && item.itemClick(item)"
                >
                    <template v-slot:label>
                        {{
                            item.hideLabel ? "" : 
                            item.labelName ? item.labelName + (ownFormConfig.elFormConfig?.labelSuffix || "：") :
                            "默认名称"+index
                        }}
                        <span v-if="item.labelNameText">{{item.labelNameText || ""}}</span>
                    </template>
                    <template v-if="item.type === 'input' || !item.type ">
                        <el-input
                            v-model="ownFormConfig.submitData[item.dataName]"
                            v-number:[item]="item.number"
                            :type="item.inputType || 'text' "
                            :clearable="item.clearable ?? true "
                            :disabled="item.disabled || false "
                            :placeholder="item.placeholder || '请输入'+item.labelName "
                            :show-password="item.showPassword || false "
                            :rows="item.rows || 2"
                            :autocomplete="
                                item.autocomplete ? item.autocomplete :
                                item.inputType === 'password' ? 'new-password' : 'new-text'
                            "
                            :prefix-icon="item.prefixIcon"
                            :suffix-icon="item.suffixIcon"
                            :maxlength="item.maxlength ? item.maxlength : '' "
                            :minlength="item.minlength ? item.minlength : '' "
                            :show-word-limit="['text','textarea'].includes(item.inputType)"
                            :style="item.style"
                            @input="(val)=>{
                                synchronous('input',item,val);
                            }"
                            @blur="(event)=>{
                                // 解决number不支持小数点时输入小数点后移除的数值未同步的bug
                                if(item.inputType === 'number' && !item.decimal) ownFormConfig.submitData[item.dataName] = event.target.value;
                                synchronous('blur',item,event);
                            }"
                            @clear="()=>{
                                synchronous('clear',item);
                            }"
                        >
                            <template v-slot:prefix>
                                <slot :name="item.prefixSlotName" :data="{data:ownFormConfig.submitData[item.dataName],item}"></slot>
                            </template>
                            <template v-slot:suffix>
                                <slot :name="item.suffixSlotName" :data="{data:ownFormConfig.submitData[item.dataName],item}"></slot>
                            </template>
                        </el-input>
                    </template>
                    <template v-else-if="item.type === 'number' ">
                        <el-input-number
                            v-model="ownFormConfig.submitData[item.dataName]"
                            :disabled="item.disabled || false"
                            :max="item.max || Infinity"
                            :min="item.min ?? -Infinity"
                            :controls-position="item.controlsPosition || ''"
                            @change="(val)=>{
                                synchronous('change',item,val);
                            }"
                        ></el-input-number>
                    </template>
                    <template v-else-if="item.type === 'select' ">
                        <el-select
                            v-model="ownFormConfig.submitData[item.dataName]"
                            :clearable="item.clearable ?? true "
                            :disabled="item.disabled || false "
                            :placeholder="item.placeholder || '请选择'+item.labelName "
                            :multiple="item.multiple || false "
                            :collapse-tags="item.collapseTags || false "
                            :filterable="item.filterable ?? true "
                            :loading="item.loading || false"
                            :remote="item.remote || false"
                            :remote-method="item.remoteMethod"
                            :style="item.style"
                            @blur="(event)=>{
                                synchronous('blur',item,event)
                            }"
                            @change="(val)=>{
                                synchronous('change',item,val)
                            }"
                            @clear="()=>{
                                synchronous('clear',item);
                            }"
                            @visible-change="(val)=>{
                                synchronous('visibleChange',item,val)
                            }"
                            @remove-tag="(val)=>{
                                synchronous('removeTag',item,val)
                            }"
                        >
                            <el-option
                                v-for="optItem in ownFormConfig.selectLists[item.dataListName]"
                                :key="optItem.value ?? optItem[item.customValueName || item.selectOptionValueName] "
                                :disabled="optItem.disabled || false "
                                :label="optItem.label ?? optItem[item.customLabelName || item.selectOptionLabelName] "
                                :value="optItem.value ?? optItem[item.customValueName || item.selectOptionValueName] "
                            ></el-option>
                        </el-select>
                    </template>
                    <template v-else-if="item.type === 'cascader' ">
                        <el-cascader
                            ref="cascaderRef"
                            v-model="ownFormConfig.submitData[item.dataName]"
                            :placeholder="item.placeholder || '请选择'+item.labelName "
                            :options="ownFormConfig.selectLists[item.dataListName] || [] "
                            :props="item.cascaderProps"
                            :collapse-tags="item.collapseTags ?? true"
                            :disabled="item.disabled || false "
                            :filterable="item.filterable || false"
                            :style="item.style"
                            @change="(val)=>{
                                synchronous('change',item,val,cascaderRef)
                            }"
                            @clear="(val)=>{
                                synchronous('clear',item,val,cascaderRef)
                            }"
                            @expand-change="(val)=>{
                                synchronous('expandChange',item,val,cascaderRef)
                            }"
                            @visible-change="(val)=>{
                                synchronous('visibleChange',item,val,cascaderRef)
                            }"
                            @remove-tag="(val)=>{
                                synchronous('removeTag',item,val,cascaderRef)
                            }"
                        ></el-cascader>
                    </template>
                    <template v-else-if="item.type === 'radio' ">
                        <el-radio-group
                            v-model="ownFormConfig.submitData[item.dataName]"
                            :disabled="item.disabled || false "
                            :style="item.style"
                            @change="(val)=>{
                                synchronous('change',item,val)
                            }"
                        >
                            <template
                                v-for="optItem in ownFormConfig.selectLists[item.dataListName]"
                                :key="optItem.label ?? optItem[item.customLabelName] "
                            >
                                <el-radio
                                    :name="optItem.value+'' "
                                    :label="optItem.label ?? optItem[item.customLabelName]"
                                    :value="optItem.value ?? optItem[item.customValueName]"
                                    :disabled="optItem.disabled || false "
                                    v-if="!optItem.isHide"
                                >{{optItem.label ?? optItem[item.customLabelName] }}</el-radio>
                            </template>
                        </el-radio-group>
                    </template>
                    <template v-else-if="item.type === 'switch' ">
                        <el-switch
                            v-model="ownFormConfig.submitData[item.dataName]"
                            :disabled="item.disabled || false "
                            :size="item.switchSize || 'default' "
                            :active-text="item.activeText || '' "
                            :inactive-text="item.inactiveText || '' "
                            :active-value="item.activeValue ?? '' "
                            :inactive-value="item.inactiveValue ?? '' "
                            :inline-prompt="item.inlinePrompt || false"
                            :style="item.style"
                            @change="(val)=>{
                                synchronous('change',item,val)
                            }"
                        ></el-switch>
                    </template>
                    <template v-else-if="item.type === 'date' ">
                        <el-date-picker
                            v-model="ownFormConfig.submitData[item.dataName]"
                            :type="item.dateType || 'date' "
                            :disabled="item.disabled || false "
                            :placeholder="
                                !item.dateType?.includes('range') ? (item.placeholder || '请选择'+item.labelName) : ''
                            "
                            :start-placeholder="
                                item.dateType?.includes('range') ? item.startPlaceholder || '开始时间' : ''
                            "
                            :end-placeholder="
                                item.dateType?.includes('range') ? item.endPlaceholder || '结束时间' : ''
                            "
                            :format="item.format || 'YYYY-MM-DD HH:mm:ss' "
                            :value-format="item.valueFormat || 'YYYY-MM-DD HH:mm:ss' "
                            :range-separator="item.rangeSeparator || '至' "
                            :default-time="
                                item.defaultTime ||
                                (item.dateType?.includes('range') ? [new Date(2000,1,1,8,30,0),new Date(2000,1,1,17,30,0)] : new Date(2000,1,1,8,30,0))
                            "
                            :disabled-date="(date)=>{
                                return item.disabledDate && item.disabledDate(item,date);
                            }"
                            :default-value="item.defaultValue"
                            :time-format="item.timeFormat ? item.timeFormat : 'HH:mm:ss' "
                            :style="[{width:item.dateWidth ? item.dateWidth + 'px' : item.dateType?.includes('range') ? 280+'px' : 'auto'},item.style]"
                            @blur="(event)=>{
                                synchronous('blur',item,event)
                            }"
                            @change="(val)=>{
                                synchronous('change',item,val)
                            }"
                            @clear="(val)=>{
                                synchronous('clear',item,val)
                            }"
                            @calendar-change="(val)=>{
                                synchronous('calendarChange',item,val)
                            }"
                            @visible-change="(val)=>{
                                synchronous('visibleChange',item,val)
                            }"
                        ></el-date-picker>
                    </template>
                    <template v-else-if="item.type === 'checkbox' ">
                        <el-checkbox-group
                            v-model="ownFormConfig.submitData[item.dataName]"
                            :style="item.style"
                            @change="(event)=>{
                                synchronous('change',item,event);
                            }"
                        >
                            <el-checkbox
                                v-for="optItem in ownFormConfig.selectLists[item.dataListName]"
                                :key="optItem.label ?? optItem[item.customLabelName] "
                                :label="optItem.label ?? optItem[item.customLabelName] "
                                :value="optItem.value ?? optItem[item.customValueName] ?? optItem.label"
                                :disabled="optItem.disabled || false "
                            ></el-checkbox>
                        </el-checkbox-group>
                    </template>
                    <template v-else-if="item.type === 'rate'">
                        <el-rate
                            v-model="ownFormConfig.submitData[item.dataName]"
                            :max="item.max ?? 5"
                            :size="item.rateSize || 'default'"
                            :disabled="item.disabled || false"
                            :allow-half="item.allowHalf || false"
                            v-bind="item"
                            @change="(val)=>{
                                synchronous('change',item,val);
                            }"
                        ></el-rate>
                    </template>
                    <template v-else-if="item.type === 'upload' ">
                        <QilinUploadFile
                            v-model:uploadFileConfig="ownFormConfig.itemConfig[index]"
                            :fileList="ownFormConfig.submitData[item.dataName]"
                            @success="(fileList,file)=>{
                                ownFormConfig.submitData[item.dataName]=fileList;
                                synchronous('customFn',item,file);
                                formClearValidate(item.dataName);
                            }"
                            @actionSuccess="(res,file)=>{
                                ownFormConfig.submitData[item.dataName].push({...res[item.fileOptions?.responseDataName || 'data'],raw:file.raw});
                                formClearValidate(item.dataName);
                            }"
                        ></QilinUploadFile>
                    </template>
                    <template v-else-if="item.type === 'image' ">
                        <QilinUploadImage
                            v-model:uploadImageConfig="ownFormConfig.itemConfig[index]"
                            :fileList="ownFormConfig.submitData[item.dataName]"
                            @success="(fileList,file)=>{
                                ownFormConfig.submitData[item.dataName]=fileList;
                                synchronous('customFn',item,file);
                                formClearValidate(item.dataName);
                            }"
                            @actionSuccess="(res,file)=>{
                                ownFormConfig.submitData[item.dataName].push({...res[item.imageOptions?.responseDataName || 'data']});
                                formClearValidate(item.dataName);
                            }"
                        ></QilinUploadImage>
                    </template>
                    <template v-else-if="item.type === 'wangEditor' ">
                        <QilinWangEditor
                            ref="QilinWangEditorRef"
                            v-model:wangEditorConfig="item.wangEditorConfig"
                            :content="ownFormConfig.submitData[item.dataName]"
                            @success="(value)=>{
                                if(value !== '<p><br></p>'){
                                    ownFormConfig.submitData[item.dataName]=value;
                                    formClearValidate(item.dataName);
                                }
                            }"
                            @uploadImage="item.uploadImage"
                        ></QilinWangEditor>
                    </template>
                    <template v-else-if="item.type === 'vueEditor' ">
                        <QilinVueEditify
                            ref="QilinVueEditifyRef"
                            v-model:editifyConfig="item.editifyConfig"
                            :content="ownFormConfig.submitData[item.dataName]"
                            @success="(value)=>{
                                if(value !== '<p><br></p>'){
                                    ownFormConfig.submitData[item.dataName]=value;
                                    formClearValidate(item.dataName);
                                }else{
                                    //失去焦点触发校验，默认是带<p><br></p>的，故要取空字符串
                                    ownFormConfig.submitData[item.dataName]='';
                                    formValidateField(item.dataName);
                                };
                            }"
                        ></QilinVueEditify>
                    </template>
                    <template v-else-if="item.type === 'kaitifytext' ">
                        <QilinKaitify
                        v-model="ownFormConfig.submitData[item.dataName]"
                        :kaitifyConfig="item.kaitifyConfig"
                        @success="(flag)=>{
                            if(!flag){
                                formClearValidate(item.dataName);
                            }else{ //失去焦点触发校验
                                ownFormConfig.submitData[item.dataName]='';
                                // formValidateField(item.dataName);
                            }
                        }"
                        ></QilinKaitify>
                    </template>
                    <template v-else-if="item.type === 'slot' ">
                        <slot
                            :name="item.slotName"
                            :data="{item}"
                        ></slot>
                    </template>
                </el-form-item>
                <slot v-if="item.type === 'itemSlot'" :name="item.slotName" :data="{item}"></slot>
            </template>
            <slot name="extraFormItem"></slot>
            <el-form-item
                :class="['QilinForm-button',ownFormConfig.buttonConfigClassName]"
                v-if="ownFormConfig.buttonConfig && ownFormConfig.buttonConfig.length > 0 "
            >
                <template 
                    v-for="(item,index) in ownFormConfig.buttonConfig" 
                    :key="'button-'+index"
                >
                    <el-button
                        v-if="item.isHide ? false : item.isHideFn ? item.isHideFn(item) : true"
                        :type="item.btnType || item.type || 'primary' "
                        :size="item.btnSize || item.size || 'default' "
                        :class="item.className"
                        v-bind="item"
                        @click="(item.btnClick && item.btnClick(item.formRefName,$event)) || (item.click && item.click(item.formRefName,$event))"
                    >{{item.btnName || "按钮"}}</el-button>
                </template>
            </el-form-item>
        </el-form>
        <slot name="extraItem"></slot>
    </div>
</template>

<script setup>
/**
 * 注意：级联必填时trigger须填change或含change触发方式，否则选中值无法消除必填校验
 */

import {defineOptions,ref,reactive,computed,nextTick} from "vue";
import QilinFormRules from "./formRule.js";

defineOptions({
    name:"QilinForm"
});

/*
    数据变量定义区域
*/
// 组件自身的校验规则
let ownFormRules=ref({});
// 用于规则更新后刷新key值，解决规则更新不生效的问题
let componentKey=ref(0);
// 获取表单元素DOM
const formRef=ref(null);
// 获取wangEditor元素DOM
const QilinWangEditorRef=ref(null);
const cascaderRef = ref(null); //获取级联元素DOM


/*
    计算属性等代码区域
*/
// 接收父组件的传参
const propsValue=defineProps({
    formConfig:{
        type:Object,
        default(){
            return {
                // el-form标签上的相关配置
                elFormConfig:{
                    labelPosition:"right", //label对齐方式--默认right
                    labelWidth:"60px", //label宽度--默认60px
                    labelSuffix:":", //label后缀--默认：
                    size:"default", //el-form的大小--默认default
                    className:"", //el-form的自定义类名
                    style:"", //最外层元素的自定义行内样式
                    border:false, //是否将表单元素转为表格样式，默认false
                    borderColor:"#E9E9E9", //表格样式的边框颜色，默认#E9E9E9
                    validateOnRuleChange:false, //是否在rules属性改变后立即触发一次验证，默认false
                },
                // 表单结构相关配置项
                itemConfig:[
                    {
                        dataName:"name", //对应后台数据名
                        labelName:"姓名", //label名称
                        isHide:false, //是否隐藏该表单项
                        hideLabel:false, //是否隐藏label字段
                        labelNameText:"", //label标签的额外字段
                        type:"input", //表单组件类型--默认为input
                        inputType:"text", //表单input类型--默认为text--仅当type为input时生效
                        showPassword:false, //是是否显示切换密码图标，当且仅当inputType=password时生效
                        autocomplete:"off", //点击密码框是否提示快捷密码，默认off不提示（有些浏览器并不生效，测试设置为new-password即可）
                        clearable:true, //是否可以一键清空--默认true
                        rows:2, //行高--默认2--当inputType为textarea生效
                        number:"", //当输入框为数字输入框时，允许输入的整数位数，当inputType为number时生效
                        decimal:"", //当输入框为数字输入框时，允许输入的小数位数，当inputType为number时生效
                        negativeSign:false, //当输入框为数字输入框时，表示是否支持负数，默认不支持，当inputType为number时生效
                        maxlength:"", //最大输入长度
                        minlength:"", //最小输入长度
                        prefixIcon:"", //输入框前置内置图标
                        prefixSlotName:"", //输入框前置内置图标插槽名称
                        suffixIcon:"", //输入框后置内置图标
                        suffixSlotName:"", //输入框后置内置图标插槽名称
                        max:"", //最大输入数字
                        min:"", //最小输入数字
                        rateSize:"default", //rate的尺寸，默认default
                        allowHalf:false, //是否允许半选，当且仅当type=rate时生效
                        controlsPosition:"", //数字输入框的控制按钮位置
                        dataListName:"", //下拉数据名对应selectLists中属性--当type为select时生效
                        multiple:false, //是否可以多选--当type为select、checkbox时生效默认false
                        collapseTags:false, //多选时是否将选中值按文字的形式展示--默认false--当type为select时生效
                        filterable:true, //是否可搜索--默认true--当type为select|cascader时生效,cascader时默认为false
                        cascaderProps:{}, //配置级联选择器的选项，当type为cascader时生效，里面的参数详见element官网文档
                        // loadMore:"event", //下拉滚动加载事件--当type为select时生效
                        customLabelName:"label", //下拉选项中自定义label对应字段值，默认label--当type为select、radio、checkbox时生效
                        customValueName:"value", //下拉选项中自定义value对应字段值，默认value--当type为select、radio、checkbox时生效
                        selectOptionValueName:"value", //下拉选项中的value对应的字段名，默认为value，旧版本不推荐
                        selectOptionLabelName:"label", //下拉选项中的label对应的字段名，默认为label，旧版本不推荐
                        loading:false, //是否正在从远程获取数据，当type为select时生效
                        remote:false, //其中的选项是否从服务器远程加载，当type为select时生效
                        remoteMethod:"event", //自定义远程搜索方法
                        dateType:"date", //时间选择器类型--默认为date--当type为date时生效
                        defaultTime:new Date(2000,1,1,8,30,0), // 当选择时间时默认选中的时分秒时刻，默认8点半，仅限范围选择时生效
                        defaultValue:"", //选择器打开时默认显示的时间
                        disabledDate:"event", //设置禁用日期的方法，仅当type为date时生效
                        format:"YYYY-MM-DD HH:mm:ss", //时间格式化配置--默认YYYY-MM-DD HH:mm:ss--当type为date时生效
                        valueFormat:"YYYY-MM-DD HH:mm:ss", //时间格式化配置--默认YYYY-MM-DD HH:mm:ss--当type为date时生效
                        startPlaceholder:"", //日期开始提示语--当type为date时生效
                        endPlaceholder:"", //日期结束提示语--当type为date时生效
                        timeFormat:"HH:mm:ss", //时间选择器下拉列表中显示的时间格式
                        rangeSeparator:"至", //时间选择器的范围分隔符
                        switchSize:"default", //switch的大小，默认default
                        activeText:"", //switch打开时的文字描述
                        inactiveText:"", //switch关闭时的文字描述
                        activeValue:"", //switch状态为on时的值
                        inactiveValue:"", //switch状态为off时的值
                        inlinePrompt:false, //switch时图标或文字是否显示在开关内
                        width:24, //表单item的栅栏占比宽度--默认24
                        className:"", //el-form-item的自定义类名
                        disabled:false, //是否禁用--默认false
                        placeholder:"", //表单提示语
                        slotName:"", //slot具名插槽名称
                        style:"", //额外行内样式
                        itemStyle:"", //额外的el-form-item的样式
                        change:"event", //change事件
                        clear:"event", //clear事件
                        dateWidth:'auto', //元素的长度，默认为220px，当type=date时生效
                    }
                ],
                // 下拉数据集
                selectLists:{},
                // 表单底部操作提交按钮相关配置项
                buttonConfig:[
                    {
                        btnName:"按钮", //按钮名称
                        btnType:"primary", //按钮类型，旧版本type
                        btnSize:"default", //按钮大小，旧版本size
                        className:"", //按钮自定义类名
                        formRefName:"", //表单元素DOM
                        isHide: false, //是否隐藏该按钮
                        isHideFn: "event", //判断当前按钮是否隐藏的方法
                        btnClick:"event" //点击事件，旧版本click
                    }
                ],
                buttonConfigClassName:"", //表单底部按钮自定义类名
                // 提交到后台的数据集
                submitData:{}
            };
        }
    }
});

// 暴露父组件自定义方法
const emits=defineEmits(["update:formConfig","synchronous"]);

// 组件自身的配置项
let ownFormConfig=computed({
    get(){
        return propsValue.formConfig;
    },
    set(val){
        emits("update:formConfig",val);
    }
});

// 供scss使用的边框颜色变量，在scss中可用v-bind直接使用该计算属性方法
const borderColor = computed(()=>{
    return propsValue.formConfig.elFormConfig.borderColor || "#E9E9E9";
});


/*
    逻辑脚本代码区域
*/
// 创建表单的校验规则
const createFormRules=()=>{
    let ruleObj={};
    ownFormConfig.value.itemConfig.forEach((item)=>{
        if(item.validate && item.validate.length > 0){
            ruleObj[item.dataName]=item.validate;
        };
        if(item.otherValidate){
            if(ruleObj[item.dataName] && ruleObj[item.dataName].length > 0){
                ruleObj[item.dataName]=ruleObj[item.dataName].concat(QilinFormRules[item.otherValidate]);
            }else{
                ruleObj[item.dataName]=QilinFormRules[item.otherValidate];
            };
        };
    });
    ownFormRules.value = ruleObj;
    // console.log(ownFormRules.value);
    // componentKey.value += 1;
};
// 调用el-form表单组件的校验事件监听
const formValidate=(callback)=>{
    // console.log(QilinQuillRichtextRef.value);
    ownFormConfig.value.itemConfig.forEach((item)=>{
        if(item.type === "wangEditor"){ //若输入完富文本后直接点击提交按钮，须手动触发一次失去焦点事件
            // console.log(QilinWangEditorRef.value)
            QilinWangEditorRef.value.forEach((ite)=>{
                ite.handleBlur();
            });
        };
    });
    formRef.value.validate((valid)=>{
        if(callback){
            callback(valid);
        };
    });
};
// 调用el-form表单组件的单字段校验事件监听
const formValidateField=(dataName,callback)=>{
    formRef.value.validateField(dataName,(valid)=>{
        if(callback){
            callback(valid);
        };
    });
};
// 调用el-form表单组件的清空校验事件监听
const formResetFields=()=>{
    nextTick(()=>{
        formRef.value.resetFields();
        ownFormConfig.value.itemConfig.forEach((item)=>{
            if(item.type === "image" || item.type === "upload"){
                item.fileList=[];
                ownFormConfig.value.submitData[item.dataName]=[];
            }else if(["number","rate"].includes(item.type)){
                ownFormConfig.value.submitData[item.dataName]=item.min || 0;
            }else if(item.type === "checkbox"){
                ownFormConfig.value.submitData[item.dataName]=[];
            }else{
                ownFormConfig.value.submitData[item.dataName]="";
            };
        });
    });
};
// 调用el-form表单组件的单字段清除校验事件监听
const formClearValidate=(dataName)=>{
    formRef.value.clearValidate(dataName);
};
// 触发表单元素定义事件
const synchronous=(eventType,item,e,ref)=>{
    // console.log(eventType,item,e,ref);
    item[eventType] && item[eventType](item,e,ref || null);
};


/*
    生命周期等代码区域
*/
createFormRules();
// 暴露子组件的方法
defineExpose({
    formValidate,
    formResetFields,
    formClearValidate,
    formValidateField,
    createFormRules
});


</script>

<style lang="scss" scoped>
.QilinForm{
    width:100%;
    >.el-form{
        overflow:hidden;
        &.table-border{
            display:flex;
            flex-wrap:wrap;
            // border:1px solid v-bind(borderColor);
            border:1px solid var(--form-border-color);
            border-left:none;
            border-radius:6px;
            :deep(>.el-form-item){
                float:left;
                // border:1px solid v-bind(borderColor);
                border:1px solid var(--form-border-color);
                border-left:none;
                border-right:none;
                border-bottom:none;
                margin-top:-1px;
                margin-bottom:0;
                &.QilinForm-button{
                    // border-left:1px solid v-bind(borderColor);
                    border-left:1px solid var(--form-border-color);
                }
                &.is-error{
                    >.el-form-item__content{
                        padding:20px 10px;
                        >.el-form-item__error{
                            top:75%;
                            left:10px;
                        }
                    }
                }
                >.el-form-item__label{
                    height:100%;
                    align-items:center;
                    // border-left:1px solid v-bind(borderColor);
                    // border-right:1px solid v-bind(borderColor);
                    border-left:1px solid var(--form-border-color);
                    border-right:1px solid var(--form-border-color);
                    >span{
                        background-color:rgba(20,142,255,0.15);
                        font-size:$small-text-size;
                        padding:4px 6px;
                        border-radius:$radius-mini;
                        cursor:context-menu;
                    }
                }
                >.el-form-item__content{
                    padding:4px 8px;
                    .el-textarea__inner,.el-input__wrapper,.el-select__wrapper{
                        box-shadow:none;
                    }
                }
            }
        }
        :deep(>.hideLabel>.el-form-item__label){
            display:none;
        }
        :deep(>.el-form-item){
            float:left;
            >.el-form-item__label{
                >span{
                    background-color:rgba(20,142,255,0.15);
                    font-size:$small-text-size;
                    padding:4px 6px;
                    border-radius:$radius-mini;
                    cursor:context-menu;
                }
            }
            // 调整级联多选时样式
            .el-cascader{
                height:32px;
                >.el-input{
                    height:32px;
                }
            }
            .el-cascader__tags{
                flex-wrap:nowrap;
                right:72px;
            }
        }
        >.width24{
            width:100%;
        }
        >.width18{
            width:75%;
        }
        >.width16{
            width:66.66%;
        }
        >.width12{
            width:50%;
        }
        >.width8{
            width:33.33%;
        }
        >.width6{
            width:25%;
        }
        >.el-form-item.QilinForm-button{
            width:100%;
            :deep(>.el-form-item__content){
                // margin-left:0!important;
                text-align:center;
            }
        }
        .el-select{
            width:100%;
        }
    }
}
</style>
